Day 24：建立導覽列【Tailwind – 實作元件(一)】 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 24

自我挑戰組

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 24 篇

Day 24：建立導覽列【Tailwind – 實作元件(一)】

14th鐵人賽

linlaose

團隊死線衝鋒 Deadline Squad

2022-10-09 16:36:52

1145 瀏覽

分享至

從今天開始讓我們提升 tailwind 的熟練度吧，我們可以到 tailwindUI 找尋範例，今天要練習的是 Navbar

我們先把架構以及內容做出來

  <body>
    <header class="bg-gray-800">
      <nav class="container">
        <ul>
          <div>
            <img
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li>
            <ul>
              <li><a href="#">Dashboard</a></li>
              <li><a href="#">Team</a></li>
              <li><a href="#">Projects</a></li>
              <li><a href="#">Calendar</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <button type="button"><i class="fa-regular fa-bell"></i></button>
          <li><img src="./img/Navbar/avatar.jpg" alt="" /></li>
        </ul>
      </nav>
    </header>
  </body>

針對圖中圈選處加上 flex 及相關樣式並給予圖片尺寸 (h-8)

  <body>
    <header class="bg-gray-800">
      <nav class="container flex justify-between">
        <ul class="flex">
          <div>
            <img
              class="h-8"
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li>
            <ul class="flex">
              <li><a href="#">Dashboard</a></li>
              <li><a href="#">Team</a></li>
              <li><a href="#">Projects</a></li>
              <li><a href="#">Calendar</a></li>
            </ul>
          </li>
        </ul>
        <ul class="flex">
          <li>
            <button type="button"><i class="fa-regular fa-bell"></i></button>
          </li>
          <li><img class="h-8" src="./img/Navbar/avatar.jpg" alt="" /></li>
        </ul>
      </nav>
    </header>
  </body>

加上各元素的 margin 和 padding

  <body>
    <header class="bg-gray-800">
      <nav class="container flex justify-between py-3.5">
        <ul class="flex">
          <div>
            <img
              class="h-8"
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li class="ml-6">
            <ul class="flex">
              <li><a href="#" class="px-3 py-2">Dashboard</a></li>
              <li><a href="#" class="px-3 py-2 ml-4">Team</a></li>
              <li><a href="#" class="px-3 py-2 ml-4">Projects</a></li>
              <li><a href="#" class="px-3 py-2 ml-4">Calendar</a></li>
            </ul>
          </li>
        </ul>
        <ul class="flex ml-6">
          <li>
            <button type="button" class="p-1">
              <i class="fa-regular fa-bell"></i>
            </button>
          </li>
          <li><img class="h-8 ml-3" src="./img/Navbar/avatar.jpg" alt="" /></li>
        </ul>
      </nav>
    </header>
  </body>

加上字體顏色以及 hover 樣式

  <body>
    <header class="bg-gray-800">
      <nav class="container flex justify-between py-3.5">
        <ul class="flex">
          <div>
            <img
              class="h-8"
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li class="ml-6">
            <ul class="flex">
              <li>
                <a
                  href="#"
                  class="px-3 py-2 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Dashboard</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Team</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Projects</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Calendar</a
                >
              </li>
            </ul>
          </li>
        </ul>
        <ul class="flex ml-6">
          <li>
            <button type="button" class="p-1 text-gray-400 hover:text-white">
              <i class="fa-regular fa-bell"></i>
            </button>
          </li>
          <li><img class="h-8 ml-3" src="./img/Navbar/avatar.jpg" alt="" /></li>
        </ul>
      </nav>
    </header>
  </body>

調整圖片

  <body>
    <header class="bg-gray-800">
      <nav class="container flex justify-between py-3.5">
        <ul class="flex">
          <div>
            <img
              class="h-8"
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li class="ml-6">
            <ul class="flex">
              <li>
                <a
                  href="#"
                  class="px-3 py-2 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Dashboard</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Team</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Projects</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Calendar</a
                >
              </li>
            </ul>
          </li>
        </ul>
        <ul class="flex ml-6">
          <li>
            <button type="button" class="p-1 text-gray-400 hover:text-white">
              <i class="fa-regular fa-bell"></i>
            </button>
          </li>
          <li>
            <img
              class="h-8 ml-3 rounded-full"
              src="./img/Navbar/avatar.jpg"
              alt=""
            />
          </li>
        </ul>
      </nav>
    </header>
  </body>

發現 nav 的文字好像沒有垂直置中，針對 ul 標籤做細微調整

            <ul class="flex items-center h-full">
              <li>
                <a
                  href="#"
                  class="px-3 py-2 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Dashboard</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Team</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Projects</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Calendar</a
                >
              </li>
            </ul>

最終成品～